<template>
  <ul class='flex flex-row justify-evenly flex-wrap w-full py-4 px-2 text-center items-center'>
    <li class='diamond-clip-path diamond-icon' v-if='websiteConfig.github'>
      <a :href='websiteConfig.github' target='_blank' ref='github'>
        <svg-icon icon-class='github' class='fill-current' />
      </a>
    </li>
    <li class='diamond-clip-path diamond-icon' v-if='websiteConfig.gitee'>
      <a :href='websiteConfig.gitee' target='_blank' ref='github'>
        <svg-icon icon-class='gitee' class='fill-current' />
      </a>
    </li>
    <li class='diamond-clip-path diamond-icon' v-if='websiteConfig.twitter'>
      <a :href='websiteConfig.twitter' target='_blank' ref='twitter'>
        <svg-icon icon-class='twitter' class='fill-current' />
      </a>
    </li>
    <li class='diamond-clip-path diamond-icon' v-if='websiteConfig.stackoverflow'>
      <a :href='websiteConfig.stackoverflow' target='_blank' ref='stackoverflow'>
        <svg-icon icon-class='stackoverflow' class='fill-current' />
      </a>
    </li>
    <li class='diamond-clip-path diamond-icon' v-if='websiteConfig.weChat'>
      <a :href='"weixin://contacts/profile/"+websiteConfig.weChat'>
        <svg-icon icon-class='wechat' class='fill-current' />
      </a>
    </li>
    <li class='diamond-clip-path diamond-icon' v-if='websiteConfig.qq'>
      <a :href="'https://wpa.qq.com/msgrd?v=3&uin='+websiteConfig.qq+'&site=qq&menu=yes&jumpflag=1'" target='_blank'
         ref='qq'>
        <svg-icon icon-class='qq' class='fill-current' />
      </a>
    </li>
    <li class='diamond-clip-path diamond-icon' v-if='websiteConfig.weibo'>
      <a :href='websiteConfig.weibo' target='_blank' ref='weibo'>
        <svg-icon icon-class='weibo' class='fill-current' />
      </a>
    </li>
    <li class='diamond-clip-path diamond-icon' v-if='websiteConfig.csdn'>
      <a :href='websiteConfig.csdn' target='_blank' ref='csdn'>
        <svg-icon icon-class='csdn' class='fill-current' />
      </a>
    </li>
    <li class='diamond-clip-path diamond-icon' v-if='websiteConfig.zhihu'>
      <a :href='websiteConfig.zhihu' target='_blank' ref='zhifu'>
        <svg-icon icon-class='zhifu' class='fill-current' />
      </a>
    </li>
    <li class='diamond-clip-path diamond-icon' v-if='websiteConfig.juejin'>
      <a :href='websiteConfig.juejin' target='_blank' ref='juejin'>
        掘
      </a>
    </li>
  </ul>
</template>

<script lang='ts'>
import { computed, defineComponent, toRefs, reactive } from 'vue'
import { useAppStore } from '@/stores/app'
import SvgIcon from '@/components/SvgIcon/index.vue'

export default defineComponent({
  name: 'Social',
  components: { SvgIcon },
  setup() {
    let appStore = useAppStore()
    let reactiveData = reactive({
      isShow: false,
      dialogVisible: false
    })

    return {
      websiteConfig: computed(() => {
        return appStore.websiteConfig
      }),
      ...toRefs(reactiveData)
    }
  }
})
</script>

<style scoped>
.custom-social-svg-icon {
    width: 1em;
    height: 1em;
    font-size: 1em;
    vertical-align: -0.15em;
    fill: var(--text-bright);
    stroke: var(--background-primary);
    overflow: hidden;
}
.diamond-clip-path.diamond-icon a {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}
</style>
